<template>
<div>
  <mu-dialog :open="dialog" :title="dialogTitle" @close="close">
    <div>
      <mu-paper>
        <mu-divider/>
        <div class="head-box">
          <simple-image-upload :imgsize="120" :resultPicture.sync="rank_thumbnail"></simple-image-upload>
          <span>等级图标</span>
        </div>        
        <mu-divider/>
        <mu-text-field hintText="等级数" type='number' class="divider-form" :underlineShow="false" v-model="rank_number" />
        <mu-divider/>
        <mu-text-field hintText="等级名称" class="divider-form" :underlineShow="false" v-model="rank_name" />
        <mu-divider/>
        <mu-divider/>
        <mu-text-field hintText="送血量" type='number' class="divider-form" :underlineShow="false" v-model="rank_health_point" />
        <mu-divider/>
        <mu-text-field hintText="送道具" type='number' class="divider-form" :underlineShow="false" v-model="rank_prop_id" />
        <mu-divider/>
        <div class="condition-type-box">
          <span>条件类型: </span>
           <mu-radio label="次数" name="rank_condition_type" nativeValue="1" v-model="rank_condition_type" class="demo-radio"/>
          <mu-radio label="百分比" name="rank_condition_type" nativeValue="2" v-model="rank_condition_type"  class="demo-radio"/> 
        </div>
        <mu-divider/>
        <div>
          <mu-text-field hintText="条件值" type='number' class="divider-form" :underlineShow="false" v-model="rank_condition" />
          <span v-show="rank_condition_type == 2">%</span>
        </div>
        <mu-divider/>
        <div class="switch-box">
          <mu-switch label="状态" labelLeft v-model="rank_status_value"/>
        </div>
        <mu-divider/>
        <mu-raised-button label="确定"   class="button" @click="addUserRank" />
      </mu-paper>
    </div>
  </mu-dialog>

  <mu-row gutter>
    <mu-col desktop="50">
      <div class="rank-head">用户等级管理</div>
      <mu-table :fixedHeader="true" :multiSelectable="multiSelectable"
        :selectable="selectable" :showCheckbox="false">
        <mu-thead slot="header">
          <mu-tr>
            <mu-th tooltip="ID">等级</mu-th>
            <mu-th tooltip="图标">图标</mu-th>
            <mu-th tooltip="名称">名称</mu-th>
            <mu-th tooltip="送道具">送道具</mu-th>
            <mu-th tooltip="送道具">条件</mu-th>
            <mu-th tooltip="状态">状态</mu-th>
            <mu-th tooltip="操作">操作</mu-th>
          </mu-tr>
        </mu-thead>
        <mu-tbody>
          <mu-tr v-for="item,index in userRankList"  :key="index" :selected="item.selected">
            <mu-td>
              <mu-text-field class="divider-form" :disabled="isEditUserRank[index].status" :underlineShow="false" v-model="item.rank_number" />
            </mu-td>
            <mu-td>
              <img class="tubiao-img" :src="item.rank_thumbnail" alt="等级图标">
            </mu-td>
            <mu-td>
              <mu-text-field class="divider-form" :disabled="isEditUserRank[index].status" :underlineShow="false" v-model="item.rank_name" />
            </mu-td>
            <mu-td>{{item.rank_prop_id}}</mu-td>
            <mu-td>
              <span v-if="item.rank_condition_type == 1">票</span>
              <span v-if="item.rank_condition_type == 2">%</span>
              <mu-text-field class="divider-form-2" :disabled="isEditUserRank[index].status" :underlineShow="false" v-model="item.rank_condition" />
            </mu-td>
            <mu-td>
              false
              <mu-switch :disabled="isEditUserRank[index].status" v-model="isEditUserRank[index].switch"/>
                true
            </mu-td>
            <mu-td>
              <button @click="editUserRank(index,item)" class="rank-edit-btn">
                {{isEditUserRank[index].text}}
              </button>
              <button @click="delRank(item.rank_id,item.rank_name)" class="rank-del-btn">删除</button>
            </mu-td>
          </mu-tr>
        </mu-tbody>
        <mu-tfoot slot="footer">
          <mu-tr>
          </mu-tr>
        </mu-tfoot>
      </mu-table>
      <mu-raised-button label="添加" class="button" @click="openUserRank" />
      <div class="demo-table-settings">
        <h3>设置</h3>
        <mu-text-field v-model.lazy="height" label="table的高度"/><br/>
        <mu-switch labelLeft label="固定表头" v-model="fixedHeader"/><br/>
        <mu-switch labelLeft label="固定表尾" v-model="fixedFooter"/><br/>
        <mu-switch labelLeft label="可以被选择" v-model="selectable"/><br/>
        <mu-switch labelLeft label="可以多选" v-model="multiSelectable"/><br/>
        <mu-switch labelLeft label="可以选择全部" v-model="enableSelectAll"/><br/>
        <mu-switch labelLeft label="显示复选框" v-model="showCheckbox"/><br/>
      </div>
    </mu-col>
    <mu-col desktop="50">
      <div class="rank-head">图片等级管理</div>
      <mu-table :fixedHeader="true" :multiSelectable="multiSelectable"
        :selectable="selectable" :showCheckbox="false">
        <mu-thead slot="header">
          <mu-tr>
            <mu-th tooltip="ID">等级</mu-th>
            <mu-th tooltip="图标">图标</mu-th>
            <mu-th tooltip="名称">名称</mu-th>
            <mu-th tooltip="名称">送血量</mu-th>
            <mu-th tooltip="状态">状态</mu-th>
            <mu-th tooltip="状态">操作</mu-th>
          </mu-tr>
        </mu-thead>
        <mu-tbody>
          <mu-tr v-for="item,index in pictureRankList"  :key="index" :selected="item.selected">
            <mu-td>
              <mu-text-field class="divider-form" :disabled="isEditPictureRank[index].status" :underlineShow="false" v-model="item.rank_number" />
            </mu-td>
            <mu-td>
              <img class="tubiao-img" :src="item.rank_thumbnail" alt="等级图标">
            </mu-td>
            <mu-td>
              <mu-text-field class="divider-form" :disabled="isEditPictureRank[index].status" :underlineShow="false" v-model="item.rank_name" />
            </mu-td>
            <mu-td>
              <mu-text-field class="divider-form" type="number" :disabled="isEditPictureRank[index].status" :underlineShow="false" v-model="item.rank_health_point" />
            </mu-td>
            <mu-td>
              false
              <mu-switch :disabled="isEditPictureRank[index].status" v-model="isEditPictureRank[index].switch"/>
              true
            </mu-td>
            <mu-td>
              <button @click="editPictureRank(index,item)" class="rank-edit-btn">
                {{isEditPictureRank[index].text}}
              </button>
              <button @click="delPictureRank(item.rank_id,item.rank_name,index)" class="rank-del-btn">删除</button>
            </mu-td>
          </mu-tr>
        </mu-tbody>
        <mu-tfoot slot="footer">
          <mu-tr>
          </mu-tr>
        </mu-tfoot>
      </mu-table>
      <mu-raised-button label="添加" class="button" @click="openPictureRank" />
    </mu-col>
  </mu-row>
</div>
</template>

<script>
import http from "../../http/http.js" 
import SimpleImageUpload from '../../components/imageUpload/simple-image-upload.vue'
export default {
  data () {
    return {
      userRankList:[],
      pictureRankList:[],
      isEditUserRank:[],
      isEditPictureRank:[],

      fixedHeader: true,
      fixedFooter: true,
      selectable: true,
      multiSelectable: true,
      enableSelectAll: false,
      showCheckbox: true,
      height: '300px',

      getUserRankUrl: this.config.getUserRankUrl,
      getPictureRankUrl: this.config.getPictureRankUrl,

      dialogTitle: '',
      dialog: false,
      addRankUrl:this.config.addRankUrl,//添加等级地址
      updateRankUrl: this.config.updateRankUrl,// 更新等级地址
      delRankUrl: this.config.delRankUrl,//删除等级地址
      rank_status_value: true,//等级状态开关的值
      // 等级

      rank_number: '',
      rank_thumbnail: '',
      rank_name: '',
      rank_type: '',//等级类型，1用户等级，2图片等级
      rank_status: '',//等级状态，1正常，2停用
      rank_health_point: '',//送血量
      rank_prop_id: '',
      rank_condition_type: '',//到此等级的类型，1次数，2百分比
      rank_condition: '',


    }
  },
  components:{
    SimpleImageUpload
  },
  methods:{
    //弹窗
      openPictureRank () {
        this.dialogTitle = '图片等级管理'
        this.rank_type = 2
        this.dialog = true
      },
      //关闭弹窗
      close () {
        this.dialog = false
      },
      //弹窗
      openUserRank () {
        this.dialogTitle = '用户等级管理'
        this.rank_type = 1
        this.dialog = true
      },
      //编辑用户等级
      editUserRank: function(index,item){
        var that = this
        var isEditUserRank = Array()
        //因为直接将 this.isEditUserRank 赋值给 isEditUserRank 会导致 this.isEditUserRank 的所有元素的值一致
        for(var i in this.isEditUserRank) 
          isEditUserRank.push({
            status:this.isEditUserRank[i].status,
            text:this.isEditUserRank[i].text,
            switch: this.isEditUserRank[i].switch
          })
        if(isEditUserRank[index].status){ //当此等级信息不能编辑时
          isEditUserRank[index].status = false
          isEditUserRank[index].text = '确认'
        }else{
          isEditUserRank[index].status = true
          isEditUserRank[index].text = '编辑'

          //确认编辑发起修改
          var rank_status = 1
          if(!isEditUserRank[index].switch)
            rank_status = 2
          
          var updatd_rank_data = {
            rank_id: item.rank_id,
            rank_number: item.rank_number,
            rank_name: item.rank_name,
            rank_prop_id: item.rank_prop_id,
            rank_condition: item.rank_condition,
            rank_status: rank_status
          }

          http.post(that.updateRankUrl,{
            updatd_rank_data:updatd_rank_data
          })
          .then(function(response){
            // that.showToast();
            console.log(response)
          })
          .catch(function(err){console.log(err)});
        }
        this.isEditUserRank = isEditUserRank
      },
      //编辑图片等级
      editPictureRank: function(index,item){
        var that = this
        var isEditPictureRank = Array()
        //因为直接将 this.isEditPictureRank 赋值给 isEditPictureRank 会导致 this.isEditPictureRank 的所有元素的值一致
        for(var i in this.isEditPictureRank) 
          isEditPictureRank.push({
            status:this.isEditPictureRank[i].status,
            text:this.isEditPictureRank[i].text,
            switch: this.isEditPictureRank[i].switch
          })
        if(isEditPictureRank[index].status){ //当此等级信息不能编辑时
          isEditPictureRank[index].status = false
          isEditPictureRank[index].text = '确认'
        }else{
          isEditPictureRank[index].status = true
          isEditPictureRank[index].text = '编辑'

          //确认编辑发起修改
          var rank_status = 1
          if(!isEditPictureRank[index].switch)
            rank_status = 2
          
          var updatd_rank_data = {
            rank_id: item.rank_id,            
            rank_number: item.rank_number,
            rank_name: item.rank_name,
            rank_health_point: item.rank_health_point,
            rank_status: rank_status
          }
          http.post(that.updateRankUrl,{
            updatd_rank_data:updatd_rank_data
          })
          .then(function(response){
            // that.showToast();
            // console.log('修改成功')
          })
          .catch(function(err){console.log(err)});
        }
        this.isEditPictureRank = isEditPictureRank
      },
      //删除图片等级
      delPictureRank: function(id,name,index){
        var isDel = confirm("确定要删除等级"+name+'吗？')
        if(isDel){
          var that = this
          http.post(that.delRankUrl,{
              rank_id:id
          })
          .then(function(response){
            if(response.data.code == 200){
              that.pictureRankList.splice(index, 1);
              that.isEditPictureRank.splice(index, 1);
            }
          })
          .catch(function(err){console.log(err)});
        }
      },
      //添加用户等级
      addUserRank: function(){
        var that = this
        var status = 1
        if(! this.rank_status_value){
          status = 2
        }
        console.log(this.rank_condition_type)
        var rank_data = {
          rank_thumbnail: this.config.adminUrl+'/uploads/images/head/'+this.rank_thumbnail,
          rank_number: this.rank_number,
          rank_name: this.rank_name,
          rank_type: this.rank_type,
          rank_status: status,
          rank_health_point: this.rank_health_point,
          rank_prop_id: this.rank_prop_id,
          rank_condition_type: this.rank_condition_type,
          rank_condition: this.rank_condition
        }
        http.post(that.addRankUrl,{
          rank_data:rank_data
        })
        .then(function(response){
          // that.showToast();
          console.log(response)
        })
        .catch(function(err){console.log(err)});
      }
  },
  mounted() {
      var that = this
      //获取用户等级列表
      http.get(that.getUserRankUrl)
      .then(function(response){

        console.log(response.data)
        if(response.data.code == 200){
          that.userRankList = response.data.userRanks;
          var length = that.userRankList.length;
          for(var i in that.userRankList){
            var switchValue = true
            if(that.userRankList[i].rank_status == 2)
              switchValue = false
            that.isEditUserRank.push({
              status:true,
              text: '编辑',
              switch: switchValue
            })
          }
          console.log(that.isEditUserRank)
        } else
          console.log(response.data.msg)
      })
      .catch(function(err){console.log(err)});

      //获取图片等级列表
      http.get(that.getPictureRankUrl)
      .then(function(response){
        console.log(response.data)
        if(response.data.code == 200){
          that.pictureRankList = response.data.pictureRanks;
          var length = that.pictureRankList.length;
          for(var i in that.pictureRankList){
            var switchValue = true
            if(that.pictureRankList[i].rank_status == 2)
              switchValue = false
            that.isEditPictureRank.push({
              status:true,
              text: '编辑',
              switch: switchValue
            })
          }
          console.log(that.isEditPictureRank)
        } else
          console.log(response.data.msg)
      })
      .catch(function(err){console.log(err)});
    },
}
</script>

<style lang="css" scode>
.demo-table-settings{
  width: 200px;
  overflow: hidden;
  margin: 20px auto 0px;
}
.head-box{
  margin: 0 auto;
  display: flex;
}
.head-box span{
  margin:35px 30px; 
  font-size: 30px;
  color:#E1E1E1;
}
.rank-head{
  text-align: center;
  font-size: 18px;
  color:#e0e0e0;
}
.button{
  width: 100%;
  background: #03a9f4;
}
.mu-td, .mu-th{
  padding:14px 5px;
  text-align: center;
}
.divider-form {
  width: 80%;
  margin-bottom: 0;
  padding-left: 20px;
}
.divider-form-2{
  width: 80%;
  margin-bottom: 0;
}
.condition-type-box{
  display: flex;
  padding:15px 20px;
}
.switch-box{
  padding:15px 20px;
}

/*编辑按钮*/
.rank-edit-btn,.rank-del-btn{
  color:#ffffff;
  border-radius: 4px;
}
.rank-edit-btn{
  background: #4BAF4F;
}
.rank-del-btn{
  background: #FF5252;
}
.tubiao-img{
  width: 50px;
  height: 50px;
}

</style>